<template>
  <el-table :data="tableData" stripe class="table-box" :height="tabH" :style="{ width: '100%', height: tabH }" header-row-class-name="table_header_title">
    <el-table-column prop="group_name" label="标签组" width="150px" />
    <el-table-column label="标签" width="500px">
      <template #default="scope">
        <el-popover v-if="scope.row.tags.length > 15" :width="300" trigger="hover" popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;">
          <template #reference>
            <div class="tagList">
              <div class="tag_item" v-for="tagItem in scope.row.tags" :key="tagItem.id">
                {{ tagItem.name }}
              </div>
            </div>
          </template>
          <template #default>
            <div class="conceal" :style="style">
              <div class="conceal_tag_item" :style="tagStyle" v-for="tagItem in scope.row.tags" :key="tagItem.id">
                {{ tagItem.name }}
              </div>
            </div>
          </template>
        </el-popover>
        <div class="tagList" v-else>
          <div class="tag_item" v-for="tagItem in scope.row.tags" :key="tagItem.id">
            {{ tagItem.name }}
          </div>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="group_type_value" label="标签组类别" width="100px" />
    <!-- <el-table-column prop="tag_type" label="标签类型">
      <template #default>
        <div>IU</div>
      </template>
    </el-table-column> -->
    <el-table-column prop="created_at" label="创建时间"  />
    <el-table-column label="操作" width="160px" fixed="right">
      <template #default="scope">
        <div class="btn-box">
          <div style="margin-right: 10px" @click="edit(scope)" v-auth="'EDIT'">编辑</div>
          <div @click="del(scope)" v-auth="'DEL'">删除</div>
        </div>
      </template>
    </el-table-column>
  </el-table>
  <ZWSelectTag :allTags="props.allTags" ref="createTag" @submit="getCusTagList"></ZWSelectTag>
  <ZWDeletdialog ref="DeletdialogRef" @submit="batchRemove" @cancel="batchCancel"></ZWDeletdialog>
  <ZWPagination @submit="onZWPagination" />
</template>

<script lang="ts" setup>
  import { reactive, ref, onMounted } from 'vue'
  import ZWDeletdialog from '@/components/ZWDeletdialog.vue'
  import ZWSelectTag from '../../components/ZWCreateTag.vue'
  import ZWPagination from '@/components/ZWPagination.vue'
  import { getCusTags, delTagGroup } from '@/api/customerLabel'
  import { getTagsList } from '@/api/customerLabel'
  import { ElMessage } from 'element-plus'
  import { useStore } from '@/store'
  import { getSetionId, tableH, reSize } from '@/utils/utils'
  const store = useStore()
  const tabH = ref('400px')

  const emit = defineEmits(['submit'])
  const props = defineProps(['allTags'])
  let tableData = ref([])
  const createTag = ref(null)
  const DeletdialogRef = ref(null)
  const delData = ref(null) // 删除的数据
  const pageInfo = reactive({
    page_size: 15,
    page: 1
  })
  const getTableH = () => {
    tabH.value = tableH('.table-box')
    console.log(1111, tabH.value)
  }
  // 获取列表数据
  const getCusTagList = (params?: any) => {
    getCusTags(params).then((data: any) => {
      tableData.value = data.data
      store.dispatch('pageTotal', data.total)
    })
  }
  // 获取搜索数据
  const getSearchList = (data: any) => {
    const params = {
      type_list: Array.isArray(data?.tag_list) ? data?.tag_list?.join(',') : data?.tag_list,
      keyword: data?.keyword
    }
    getCusTagList(params)
  }
  // 编辑
  const edit = (data: any) => {
    createTag.value.echo(data.row)
    createTag.value.appDialog.visible = true
    createTag.value.appDialog.title = '编辑客户群标签组'
    emit('submit')
  }
  // 删除
  const del = (val: any) => {
    delData.value = val.row.group_id
    DeletdialogRef.value.appDialog.visible = true
    DeletdialogRef.value.content = `<div>删除后，已添加到客户群信息的标签也一起删除!</div>`
    console.log(val.group_type_value, 'val')
    DeletdialogRef.value.appDialog.title = `删除标签组【${val.row.group_type_value}】`
  }
  // 删除的二次确认
  const batchRemove = () => {
    delTagGroup({
      group_id: delData.value
    })
      .then((data: any) => {
        DeletdialogRef.value.appDialog.visible = false
        getCusTagList()
        ElMessage.success('删除成功')
      })
      .catch((e: any) => {
        ElMessage.error('删除失败')
      })
  }
  // 分页信息
  const onZWPagination = (data: any) => {
    const params = {
      page: data.page,
      page_size: data.page_size
    }
    getCusTagList(params)
  }
  onMounted(() => {
    getCusTagList(pageInfo)
    getTableH()
    reSize(getTableH)
  })

  defineExpose({ getSearchList })
</script>
<style scoped lang="scss">
  .container {
    border: 1px solid #eaeaea;
    .tagList {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      .tag_item {
        box-sizing: border-box;
        padding: 0 4px;
        color: #ff6b00;
        margin: 0 10px 10px 0;
        border-radius: 2px;
        font-size: 14px;
        border-radius: 2px;
        border: 1px solid #ffc69e;
        font-family: STHeitiSC-Light, STHeitiSC;
        font-weight: 300;
        color: #ff6b00;
        border: 1px solid #ffc69e;
        &:nth-child(n + 15) {
          display: none;
        }
      }
    }
    .btn-box {
      display: flex;
      justify-content: flex-start;
      flex-flow: wrap;
      div {
        height: 24px;
        padding: 0 16px;
        line-height: 24px;
        background: #ffffff;
        border-radius: 2px;
        border: 1px solid #eaeaea;
        font-size: 14px;
        font-family: STHeitiSC-Light, STHeitiSC;
        font-weight: 300;
        color: #33302d;
        margin-right: 6px;
        margin-bottom: 5px;
        cursor: pointer;
        a {
          color: #33302d;
          text-decoration: none;
        }
      }
    }
    :deep .el-table tr {
      height: 70px;
    }
  }
  /* :deep el-table__row {
  height: 70px;
} */
  .conceal {
    display: flex;
    flex-wrap: wrap;
    &_tag_item {
      padding: 4px;
      color: #ff6b00;
      margin: 0 10px 10px 0;
      border-radius: 2px;
      border: 1px solid #ffc69e;
    }
  }
</style>
